<template>
	<!--pages/my/my.wxml-->
	<view class='container'>
		<view class='top-container'>
			<image class='bg-img' src='../../../static/img/my/mine_bg_3x.png'></image>
			<view v-show='!isLogin' class='user-wrapper'>
				<view hover-class="opcity" :hover-stay-time="150" class='user'>
					<image class='avatar-img' src='../../../static/img/my/mine_def_touxiang_3x.png'></image>
					<button style="margin-top:30rpx" class="tui-btn tui-btn-small tui-white tui-fillet" hover-class="tui-white-hover" open-type="getUserInfo" @getuserinfo="getInfo">登录</button>
				</view>
			</view>
			<view v-show='isLogin' class='user'>
				<open-data class='avatar-img' type="userAvatarUrl"></open-data>
				<view class='user-info-mobile'>
					<open-data type="userNickName"></open-data>
					<view class='edit-img' hover-class="opcity" :hover-stay-time="150" @tap="edit">
					</view>
				</view>
			</view>
		</view>
	
		<view class='bottom-container' style="background-color: #FFFFFF;
		margin: -30rpx 30rpx 26rpx 30rpx;position: relative;">
			<view class='ul-item'>
				<view @click="pay_type()" class='item' hover-class="opcity" :hover-stay-time="150">
					<image class='item-img' src='../../../static/img/my/type.svg'></image>
					<text class='item-name'>支出类型</text>
				</view>
				<navigator url="../mode/mode">
					<view data-index="2" data-key='停车场' class='item' hover-class="opcity" :hover-stay-time="150">
						<image class='item-img' src='../../../static/img/my/mode.svg'></image>
						<text class='item-name'>支出方式</text>
					</view>
				</navigator>
				<navigator url="../about/about">
					<view class='item' hover-class="opcity" :hover-stay-time="150">
						<image class='item-img' src='../../../static/img/my/guanyu.svg'></image>
						<text class='item-name'>关于</text>
					</view>
				</navigator>
			</view>
			<view class='ul-item'>
				<view class='item' hover-class="opcity" :hover-stay-time="150" @click="gitee">
					<image class='item-img' src='../../../static/img/my/gitee.svg'></image>
					<text class='item-name'>Gitee</text>
				</view>
				<!-- <view data-key='停车场' class='item' hover-class="opcity" :hover-stay-time="150">
					<image class='item-img' src='../../../static/images/my/mine_icon_tingche_3x.png'></image>
					<text class='item-name'>停车场</text>
				</view>
				<view data-key='充电桩' class='item' hover-class="opcity" :hover-stay-time="150">
					<image class='item-img' src='../../../static/images/my/mine_icon_chongdian_3x.png'></image>
					<text class='item-name'>充电桩</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import common from "../../../common/common.js"
	import url from "../../../common/url.js"
	
	let self=null;
	export default {
		components:{
			tuiListView,
			tuiListCell,
			tuiIcon
		},
		data() {
			return {
				isLogin:false,
			}
		},
		mounted() {
			self=this
			
			if(null!=common.userInfo)
				self.isLogin=true;
		},
		methods: {
			//获取个人信息
			getInfo(detail){
				if(detail.detail.errMsg=="getUserInfo:ok"){
					uni.login({
					  provider: 'weixin',
					  success: function (loginRes) {
						let userInfo=detail.detail.userInfo
						userInfo.nickName=common.utf16toEntities(userInfo.nickName)
						
						const data={
							encryptedData:detail.detail.encryptedData,
							userInfo:JSON.stringify(detail.detail.userInfo),
							code:loginRes.code
						}
								
						common.http({
							url:url.loginSetUser,
							data:data,
							ok(data){
								uni.setStorageSync('login_info',{key:data,isAnonymous:0})
								common.userInfo={key:data,isAnonymous:0},
								self.isLogin=true
								uni.hideLoading()
							}
						})
					  }
					});
				}
			},
			pay_type(){
				if(common.userInfo==null){
					uni.showToast({
					    title: '登陆后才可体验该功能哦！~~~',
					    duration: 3000,
						icon:'none'
					})
				}else{
					uni.navigateTo({url:'/pages/my/type/type'});
				}
			},
			pay_mode(){
				if(common.userInfo==null){
					uni.showToast({
					    title: '登陆后才可体验该功能哦！~~~',
					    duration: 3000,
						icon:'none'
					})
				}else{
					uni.navigateTo({url:'/pages/my/mode/mode'});
				}
			},
			gitee(){
				uni.setClipboardData({
				    data: 'https://gitee.com/cq-vip/feather_account',
				    success: function () {
				        uni.showToast({
				            title: '已复制！',
				            duration: 1000,
				        });
				    },
					fail() {
						uni.showToast({
						    title: '复制失败！',
						    duration: 1000,
						});
					}
				});
			}
		}
	}
</script>

<style>
	@import '../../../static/style/thorui.css';
/* pages/my/my.wxss */
	.container {
		position: relative;
	}
	
	.tui-list-view {
		padding-top: 40upx !important
	}

	.top-container {
		height: 440rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 440rpx;
	}

	.logout {
		width: 110rpx;
		height: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 42rpx 0 24rpx 32rpx;
		position: relative;
		z-index: 2;
	}

	.logout-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 11rpx;
	}

	.logout-txt {
		font-size: 28rpx;
		color: #FEFEFE;
		line-height: 28rpx;
	}

	.user-wrapper {
		display: flex;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.user {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.avatar-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		align-self: center;
	}

	.user-info {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		align-items: center;
	}

	.user-info-mobile {
		margin-top: 30rpx;
		position: relative;
		font-size: 28rpx;
		color: #FEFEFE;
		line-height: 28rpx;
		align-self: center;
		padding: 0 50rpx;
	}

	.edit-img {
		position: absolute;
		width: 42rpx;
		height: 42rpx;
		right: 0;
		bottom: -4rpx;
	}

	.edit-img>image {
		width: 42rpx;
		height: 42rpx;
		padding-left: 25rpx;
	}

	.middle-container {
		height: 138rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin: -30rpx 30rpx 26rpx 30rpx;
		box-shadow: 0 15rpx 10rpx -15rpx #efefef;
		position: relative;
		z-index: 2;

	}

	.middle-item {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ticket-img {
		width: 80rpx;
		height: 80rpx;
		margin-left: 65rpx;
	}

	.middle-tag {
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;
		font-weight: bold;
		padding-left: 22rpx;
	}

	.car-img {
		width: 80rpx;
		height: 80rpx;
		margin-left: 97rpx;
	}

	.bottom-container {
		height: 334rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40rpx 74rpx 40rpx 95rpx;
		margin: 0 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx #efefef
	}

	.ul-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.item-img {
		width: 64rpx;
		height: 64rpx;
	}

	.item-name {
		padding-top: 13rpx;
		font-size: 24rpx;
		color: #666666;
		min-width: 80rpx;
		text-align: center;
	}

	.btn-feedback {
		background: transparent !important;
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
	}
</style>
